iT邦幫忙

2021 iThome 鐵人賽

DAY 22
1
自我挑戰組

新手全端工程師的職場成長歷程系列 第 22

Day22:【技術篇】CSS 的變數運用技巧(1)

  • 分享至 

  • xImage
  •  

一、前言

  在 JavaScript 的世界裡有變數,那初學者們也知道 CSS (階層式樣式表,Cascading Style Sheets)也有嗎?以下內容以我工作上常用的做介紹與舉例~

二、CSS 的變數運用技巧

1. 宣告css變數

  將會運用到的變數都放在 :root 選取器內,並且使用 --自訂名稱作為屬性的方式來宣告變數。

:root {
  --primary: Aquamarine;
  --background-color: Teal;
}

2. 使用css變數

  取值的階段,取值時前方依然是撰寫我們需要套用的樣式屬性,後方再接著使用 var (--變數名稱) 來套用。

body {
  background: var(--background-color);
}

3. 在RWD使用css變數

  製作響應式時,因為螢幕大小的不同通常會需要調整文字大小來符合需求,最常見的方式就是透過選取器一一覆蓋字體大小,如果透過變數的方式就可以統一切換整體文字大小,不需要一一的調整每個選取器。

:root {
  --font-size: 14px;
}
/* 使用變數定義文字大小 */
p {
  font-size: var(--font-size);
}
/* 除此之外,還可以透過 calc 用相同變數做運算,讓特定的文字更大獲更小 */
h1 {
  font-size: calc(var(--font-size) * 1.5);
}
@media (min-width: 480px) {
  :root {
    --font-size: 18px;
  }
}

三、結論與自我鼓勵

  我在初學網頁設計時,最先接觸到的是 HTML 和 CSS,但因為只是買初階的線上課程,並未學得很深入,後來才知道還有選取器、變數和 SCSS 等這麼多實用技巧,可以不用寫冗長的程式碼,也能達到想要的樣式編排效果,每學一點新的,真的就讓我對做網頁更有興趣了!


本文同步發佈於我的個人網站 Annie Code Life


上一篇
Day21:【技術篇】SSH 的基本運作原理
下一篇
Day23:【技術篇】CSS 的變數運用技巧(2)
系列文
新手全端工程師的職場成長歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2021-10-07 23:24:00

原來這麼實用~學到了!

我要留言

立即登入留言